<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="common::head"></head>

<body>

<header>
  <!--页面顶部内容,登录登出等信息-->
  <div th:replace="common::page-top"></div>
  <!--搜索导航-->
  <div th:replace="common::search-nav"></div>
</header>

<!--主体内容-->
<div style="height: auto" >
  <div class="header_banner" style="height: auto">
    <div th:replace="common::catalog"></div>
    <div class="header_main_center">
      <div name="itemBox" style="width: 100%">
        <table class="layui-table">
          <colgroup>
            <col width="130">
            <col width="100">
            <col width="110">
            <col width="110">
            <col width="170">
            <col>
          </colgroup>
          <thead>
          <tr>
            <th>PICTURE</th>
            <th>PRODUCT NO</th>
            <th>TYPE</th>
            <th>PRAM</th>
            <th>OEM NO</th>
            <th>APPLICATION</th>
          </tr>
          </thead>
          <tbody>
          <tr th:each="product : ${productList}">
            <td ><img th:src="${product.image}"> </td>
            <td> <a th:href="@{${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName()} + '/page/detail/' + ${product.id} }"
                    th:text="${product.productNo}"
                    style="color: #1E9FFF"
            ></a></td>
            <td th:text="${product.catalogEnname}"></td>
            <td th:text="${product.attributes}"></td>
            <td >
              <p th:each="oem : ${product.oemList}" th:text="${oem.brand +':' + oem.refNo}"></p>
            </td>
            <td >
              <p th:each="car : ${product.carList}" th:text="${car.brand +':' + car.fullname}"></p>
            </td>
          </tr>
          </tbody>
        </table>
        <div id="pagehelper"></div>
      </div>
    </div>
    <div style="clear: both"></div>
  </div>
  <div style="clear: both"></div>
</div>
<div style="clear: both"></div>

<!--页脚-->
<div th:replace="common::footer"></div>
</body>
<script>
  layui.use('laypage', function(){
    var laypage = layui.laypage;

    //执行一个laypage实例
    let p=window.location.href.split('?')[1]
    let params=new URLSearchParams(p)
    laypage.render({
      elem: 'pagehelper', //注意，这里的 test1 是 ID，不用加 # 号
      count: [[${page.totalCount}]], //数据总数，从服务端得到
      limit: [[${page.pageSize}]]?[[${page.pageSize}]]:10, //数据总数，从服务端得到
      curr: params.get("pageNum")?params.get("pageNum"):1,//当前页
      limits:[10, 20, 30, 40, 50],
      layout:['limit','prev', 'page', 'next'],
      jump: function(obj, first){
        //obj包含了当前分页的所有参数，比如：
        //首次不执行
        if(!first){
          //do something
          var param = location.search;			//search获得地址中的参数，内容为'?itemId=12'
          var result = param.match(/[^\?&]*=[^&]*/g); 	//match是字符串中符合的字段一个一个取出来，result中的值为['login=xx','table=admin']
          param = {};					//让paras变成没有内容的json对象
          for(i in result){
            var temp = result[i].split('=');	//split()将一个字符串分解成一个数组,两次遍历result中的值分别为['itemId','xx']
            param[temp[0]] = temp[1];
          }
          param.pageNum = obj.curr
          param.limit = obj.limit
          let url = window.location.pathname + "?"
          for(let key  in param){
            let str = key + "=" + param[key] + "&"
            url+=str
          }
          window.location.href = url.substring(0,url.length - 1);
        }
      }
    });
  });
</script>
<script type="text/javascript" th:src="@{/static/index/js/text.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/header.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/secend.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/index.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/left,top.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/catalogLoader.js}"></script>
</html>
